<template>
  <el-dialog
    :title="!form.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="800px"
    :visible.sync="visible">
    <el-form
      size="mini"
      :model="form"
      :rules="rules"
      ref="dataForm"
      @keyup.enter.native="submitForm()"
      label-width="120px">
      <el-form-item label="名称" prop="clientName">
        <el-input v-model="form.clientName" placeholder="客户端名称"></el-input>
      </el-form-item>
      <el-form-item label="权限范围" prop="scope">
        <el-input v-model="form.scope" placeholder="多个请用 , 隔开"></el-input>
      </el-form-item>
      <el-form-item label="授权类型" prop="authorizedGrantTypes">
        <el-input v-model="form.authorizedGrantTypes" placeholder="多个请用 , 隔"></el-input>
      </el-form-item>
      <el-form-item label="回调地址" prop="webServerRedirectUri">
        <el-input v-model="form.webServerRedirectUri" placeholder="多个请用 , 隔开"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="token期限" prop="accessTokenValidity">
            <el-input-number v-model="form.accessTokenValidity"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="刷新期限" prop="refreshTokenValidity">
            <el-input-number v-model="form.refreshTokenValidity"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="自动授权" prop="areaCode">
        <el-switch active-value="true" inactive-value="false" v-model="form.autoapprove"></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" icon="el-icon-circle-check" type="primary" @click="submitForm()">确定</el-button>
      <el-button size="mini" icon="el-icon-circle-close" @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getWare, saveWare, updateWare} from "@/api/ware/ware";
import {addClient, getClient, updateClient} from "@/api/auth/client";

export default {
  name: 'ClientForm',
  data() {
    return {
      visible: false,
      form: {},
      rules: {
        clientName: [
          {required: true, message: '请输入客户端名称', trigger: 'blur'}
        ],
        scope: [
          {required: true, message: '请输入范围', trigger: 'blur'}
        ],
        authorizedGrantTypes: [
          {required: true, message: '请选择授权类型', trigger: 'blur'}
        ],
        webServerRedirectUri: [
          {required: true, message: '请输入回调地址', trigger: 'blur'}
        ],
        accessTokenValidity: [
          {required: true, message: 'token有效期', trigger: 'blur'}
        ],
        refreshTokenValidity: [
          {required: true, message: 'refreshToken有效期', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    add() {
      this.visible = true
      this.form = {}
    },

    edit(id) {
      this.visible = true
      this.$nextTick(() => {
        getClient(id).then(res => {
          if (res.success) {
            this.form = res.data
          }
        })
      })
    },

    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            let that = this
            addClient(this.form).then(res => {
              if (res.success) {
                this.visible = false
                this.$alert(`客户端创建成功,Secret为:${res.message},请妥善保管`, '创建成功', {
                  confirmButtonText: '确定',
                  callback: action => {
                    that.$emit('ok')
                  }
                });
              }
            })
          } else {
            updateClient(this.form).then(res => {
              if (res.success) {
                this.visible = false
                this.$message.success('客户端信息已更新')
                this.$emit('ok')
              }
            })
          }
        }
      })
    }
  }
}
</script>
